<template>
	<view class="page">
		<!-- 导航栏 -->
		<free-nav-bar showBack :showRight="detail.friend"  bgColor="bg-white">
			<view slot="right">
				<free-icon-button :icon="'\ue6fd'" v-if="detail.friend" @click="openAction"></free-icon-button>
			</view>
		</free-nav-bar>
		
		<view class="px-3 py-4 flex align-center bg-white border-bottom">
			<free-avater :src="detail.avatar" size="120"></free-avater>
			<view class="flex flex-column ml-3 flex-1">
				<view class="flex align-center justify-between">
					<text class="font-lg font-weight-bold mb-1">{{detail.nickname}}</text>
					<image v-if="detail.star" src="/static/images/star.png" 
					style="width: 40rpx; height: 40rpx;"></image>
				</view>
				<text class="font text-light-muted">账号：{{ detail.username }}</text>
				<!-- <text class="font text-light-muted">地区：火星</text> -->
			</view>
		</view>
		<free-list-item v-if="detail.friend"  showRight :showLeftIcon="false"
		@click="openUserRemarkTag">
			<view class="flex align-center">
				<text class="font-md text-dark mr-3">设置备注和标签</text>
				<text class="font text-light-muted mr-2" 
				v-for="(item,index) in detail.tags" :key="index">{{item}}</text>
				<text class="font text-light-muted" v-if="detail.tags.length < 1">未设置</text>
			</view>
		</free-list-item>
		
		<free-divider></free-divider>
		<free-list-item v-if="detail.friend" showRight :showLeftIcon="false" @click="openMoments">
			<view class="flex align-center" >
				<text class="font-md text-dark mr-3">朋友圈</text>
				<template v-if="detail.moments[0]">
					<text v-if="detail.moments[0].content && detail.moments[0].image.length" 
					class="font text-secondary">{{detail.moments[0].content}}</text>
					<image v-for="(item,index) in detail.moments[0].image" :key="index"
					:src="item" class="mr-2" style="width: 90rpx; height: 90rpx;"></image>
				</template>
			</view>
		</free-list-item>
		<!-- <free-list-item title="更多信息" showRight :showLeftIcon="false"></free-list-item> -->
		
		<free-divider></free-divider>
		<view class="py-3 flex align-center justify-center bg-white" hover-class="bg-light"
		v-if="detail.friend" @click="doEvent">
			<text class="iconfont text-primary font-md mr-1" v-if="!detail.isBlack">&#xe64e;</text>
			<text class="font-md text-primary">{{detail.isBlack ? '移出黑名单':'发信息'}}</text>
		</view>
		<view class="py-3 flex align-center justify-center bg-white" hover-class="bg-light"
		v-else @click="openAddFriend" >
			<text class="font-md text-primary">添加好友</text>
		</view>
		
		
		<!-- 操作菜单 -->
		<free-popup ref="action" bottom transformOrigin="center bottom" maskColor>
			<scroll-view scroll-y="true" class="bg-white" style="height: 580rpx;" 
			:show-scrollbar="false">
				<free-list-item v-for="(item,index) in actions" :key="index" 
				:title="item.title" @click="popupEvent(item)" 
				:border="false">
					<text slot="icon" class="iconfont font-lg py-1">{{item.icon}}</text>
				</free-list-item>
			</scroll-view>
		</free-popup>
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import freeAvater from "@/components/free-ui/free-avater.vue"
	import freeDivider from "@/components/free-ui/free-divider.vue"
	import freeListItem from "@/components/free-ui/free-list-item.vue"
	import freeIconButton from "@/components/free-ui/free-icon-button.vue"
	import freePopup from "@/components/free-ui/free-popup.vue"
	import auth from '@/common/mixin/auth.js'
	import $H from '@/common/free-lib/request.js';
	export default {
		data() {
			return {
				detail:{
					id:0,
					username: "",
					nickname: "",
					avatar: "",
					sex: "",
					sign: "",
					area: "",
					friend: false,
					lookme: 1,
					lookhim: 1,
					star: 0,
					isBlack: 0,
					tags: []
				}
			}
		},
		mixins: [auth],
		onLoad(e) {
			if(!e.user_id){
				return this.backToast()
			}
			this.detail.id = e.user_id
			
			uni.$on('saveRemarkTag',({nickname,tagList})=>{
				this.nickname = nickname
				this.tagList = tagList
			})
		},
		onShow() {
			// 获取当前用户资料
			this.getData()
		},
		beforeDestroy() {
			uni.$off('saveRemarkTag')
		},
		methods: {
			// 获取当前用户资料
			getData(){
				$H.get('/friend/read/'+this.detail.id)
				.then((res)=>{
					if(!res){
						return this.backToast('该用户不存在')
					}
					if(res.moments && res.moments[0]){
						res.moments[0].image = res.moments[0].image.split(',')
					}
					console.log(res);
					this.detail = res
				})
			},
			openAddFriend(){
				uni.navigateTo({
					url: '/pages/mail/add-friend/add-friend?params='+JSON.stringify({
						friend_id: this.detail.id,
						nickname: this.detail.nickname,
						lookme: typeof this.detail.lookme === 'number' ? this.detail.lookme : 0,
						lookhim: typeof this.detail.lookhim === 'number' ? this.detail.lookhim : 0
					}),
				});
			},
			// 打开操作菜单
			openAction(){
				this.$refs.action.show()
			},
			// 跳转
			navigate(path){
				uni.navigateTo({
					url: '/pages/'+path
				});
			},
			// 跳转到标签设置页
			openUserRemarkTag(){
				this.navigate("mail/user-remark-tag/user-remark-tag?params="+JSON.stringify({
							user_id: this.detail.id,
							nickname: this.detail.nickname,
							tags: this.detail.tags.join(',')
						}))
			},
			// 操作菜单事件
			popupEvent(e){
				if (!e.type) return;
				switch (e.type){
					case 'navigateTo':
						this.navigate(e.path)
						break;
					case 'event':
						this[e.event](e)
						//等同于:this.setStar(e)
						break;
					default:
						break;
				}
				// 关闭弹出层
				this.$refs.action.hide()
			},
			// 删除好友
			deleteItem(){
				uni.showModal({
					content: '是否要删除该好友？',
					success: (res)=> {
						if (res.confirm) {
							$H.post('/friend/destroy',{
								friend_id: this.detail.id
							}).then(res=>{
								uni.showToast({
									title: '删除好友成功',
									icon: 'none'
								});
								uni.reLaunch({
									url: "/pages/tabbar/index/index"
								})
							})
						}
					}
				});
			},
			// 设为星标好友
			setStar(e){
				let star = this.detail.star == 0 ? 1 : 0
				$H.post('friend/setstar/'+this.detail.id,{
					star
				}).then((res)=>{
					this.detail.star = star
					e.title = this.detail.star ? '取消星标好友' : '设为星标好友'
				})
			},
			// 加入黑名单
			setBlack(e){
				let msg = this.detail.isblack ? '移出黑名单' : '加入黑名单'
				uni.showModal({
					content: '是否要' + msg,
					success: (res)=> {
						if (res.confirm) {
							let isblack = this.detail.isblack == 0 ? 1 : 0
							$H.post('friend/setblack/'+this.detail.id,{
								isblack
							}).then((res)=>{
								this.detail.isblack = isblack
							})
							uni.showToast({
								title: msg+'成功'
							});
						}
					}
				});
			},
			// 发送或者移出黑名单
			doEvent(){
				if(this.detail.isblack){
					return this.setBlack()
				}
				// 发送消息
				uni.navigateTo({
					url: '/pages/chat/chat?params='+encodeURIComponent(JSON.stringify({
						id: this.detail.id,
						name: this.detail.nickname ? this.detail.nickname : this.detail.username,
						avatar: this.detail.avatar,
						chat_type: "user"
					}))
				});
			},
			// 打开朋友圈
			openMoments(){
				uni.navigateTo({
					url: '/pages/find/moments/moments?key=moment&params='+encodeURIComponent(JSON.stringify({
						id: this.detail.id,
						name: this.detail.nickname || this.detail.username,
						avatar: this.detail.avatar
					}))
				})
			}
		},
		computed:{
			actions(){
				return[
					{
						icon: "\ue6b3",
						title: "设置备注和标签",
						type: "navigateTo",
						path: "mail/user-remark-tag/user-remark-tag?params="+JSON.stringify({
							user_id: this.detail.id,
							nickname: this.detail.nickname,
							tags: this.detail.tags ? this.detail.tags.join(',') : ''
						})
					},
					{
						icon:"\ue613",
						title:"把Ta推荐给朋友",
						type: "navigateTo",
						path: "chat/chat-list/chat-list?params="+encodeURIComponent(JSON.stringify({
							type: "card",
							data: this.detail.nicname || this.detail.username,
							options: {
								avatar: this.detail.avatar,
								id: this.detail.id
							}
						}))
					},
					{
						icon:"\ue6b0",
						title: this.detail.star? '取消星标好友' : '设为星标好友',
						type:"event",
						event:"setStar"
					},
					{
						icon:"\ue667",
						title:"设置朋友圈和动态权限",
						type: "navigateTo",
						path: "mail/user-moments-auth/user-moments-auth?user_id="+this.detail.id+"&params="+JSON.stringify({
							lookme:this.detail.lookme,
							lookhim: this.detail.lookhim
						})
					},
					{
						icon:"\ue638",
						title: this.detail.isblack ? '移出黑名单' : '加入黑名单',
						type:"event",
						event:"setBlack"
					},
					{
						icon:"\ue61c",
						title:"投诉",
						type: "navigateTo",
						path: "mail/user-report/user-report?params="+JSON.stringify({
							user_id: this.detail.id,
							type: "user"
						})
					},
					{
						icon:"\ue638",
						title: '删除',
						type:"event",
						event:"deleteItem"
					}
				]
			}
		},
		components:{
			freePopup,
			freeNavBar,
			freeAvater,
			freeDivider,
			freeListItem,
			freeIconButton
		}
	}
</script>

<style>

</style>
